<template>
  <div class="loginContainer">
    <div class="header">
      <div class="headerCenter">
        <!-- logo -->
        <img class="logo" src="../../assets/img/login/logo.png" alt="长安民生物流" />
        <!-- 分隔线 -->
        <div class="DividerLine"></div>
        <div class="title">同城智慧物流运营商管理平台</div>
      </div>
    </div>
    <div class="main">
      <div class="mainCenter">
        <div class="main_title">
          <div class="WelcomeUse">欢迎使用</div>
          <div class="name">同城智慧物流运营商管理平台</div>
          <div class="englishName">
            Smart logistics management platform in the same city
          </div>
        </div>
        <img class="dian" src="../../assets/img/login/dian4.png" alt="" />
        <!-- 登录弹窗 -->
        <div class="loginBox">
          <loginItem></loginItem>
        </div>
      </div>
    </div>
    <div class="footer">
      <div class="footerInfo">
        <div class="title">Copyright 2023-{{ year }} 长安民生物流 版权所有</div>
        <div class="text">
          通使用谷歌浏览器或IE内核浏览器访问，使用过程中有任何问题，请拨打服务热线：023-88795445
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import loginItem from "./components/loginItem.vue"; //引用登录子组件
import httpApi from "@/http";
export default {
  data() {
    return {
      year: "",
    };
  },
  created() {
    localStorage.setItem("cont", 0);
    let token = localStorage.getItem("token");
    if (token) {
      httpApi.loginApi.getUserInfo().then((res) => {
        if (res.data.code == 200) {
          this.$router.push("/home/index");
        }
      });
    } else {
      return;
    }
  },
  components: {
    loginItem,
  },
  methods: {
    getYear() {
      var moment = require("moment");
      this.year = moment().format("YYYY");
      //console.log(this.year);
    }
  },
  mounted() {
    this.getYear()
  }
};
</script>

<style lang="scss" scoped>
.loginContainer {
  width: 100%;
  height: 100vh;
  min-width: 1098px;


  display: flex;
  flex-direction: column;

  //background-attachment: fixed;
  >.header {
    height: 15vh;
    max-height: 110px;
    width: 100%;
    background-color: #fff;
    display: flex;
    align-items: center;

    .headerCenter {
      width: 80vw;
      min-width: 1098px;
      display: flex;
      align-items: center;
      margin: 0 auto;

      .logo {
        width: 105px;
        height: 42px;
      }

      >.DividerLine {
        width: 1px;
        height: 26px;
        background: #b0b0b0;
        margin-left: 21px;
        margin-right: 15px;
      }

      >.title {
        color: #262626;
        font-size: 20px;
      }
    }
  }

  >.main {
    width: 100%;
    height: 80vh;
    min-height: 524px;

    position: relative;
    background-image: url("../../assets/img/login/background4.png");
    background-repeat: no-repeat;
    background-size: cover;

    >.mainCenter {
      width: 82vw;
      min-width: 1098px;
      height: 100%;
      margin: 0 auto;

      position: relative;

      >.main_title {
        color: #fff;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        font-size: 48px;
        position: relative;
        z-index: 100;
        display: inline-block;

        >.WelcomeUse {
          margin-bottom: 16px;
          font-weight: lighter;
        }

        >.name {
          font-weight: bold;
          margin-bottom: 17px;
        }

        >.englishName {
          font-size: 14px;
        }
      }

      >.dian {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        left: 245px;
        width: 286px;
        height: 293px;
        z-index: 50;
      }

      >.loginBox {
        width: 360px;
        height: 360px;
        background-color: #fff;
        border-radius: 8px;
        position: absolute;
        right: 0;
        top: 50%;
        transform: translateY(-50%);
      }
    }
  }

  >.footer {
    width: 100%;
    height: 13vh;
    max-height: 110px;
    background-color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;

    >.footerInfo {
      min-width: 1098px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;

      font-size: 12px;
      color: #262626;
      align-items: center;

      >.title {
        margin-bottom: 6px;
      }
    }
  }
}</style>
